<template>
  <div class="app-tabbar">
    <van-tabbar route>
      <van-tabbar-item to="/" icon="home-o">首页
        <template #icon="props">
          <geek-icon :name="props.active?'home-sel':'home'"></geek-icon>
      </template>
      </van-tabbar-item>
      <van-tabbar-item to="/question" icon="search">问答
        <template #icon="props">
          <geek-icon :name="props.active?'qa-sel':'qa'"></geek-icon>
         </template>
      </van-tabbar-item>
      <van-tabbar-item to="/video" icon="friends-o">视频
        <template #icon="props">
          <geek-icon :name="props.active?'video-sel':'video'"></geek-icon>
         </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user" icon="setting-o">我的
        <template #icon="props">
          <geek-icon :name="props.active?'mine-sel':'mine'"></geek-icon>
         </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import geekIcon from './geek-icon.vue'
export default {
  components: { geekIcon },
  name: 'AppTabbar'

}
</script>
<style scoped lang="less">

.van-tabbar {
  background: @geek-gray-color;
  position: static;
}
/deep/ .van-tabbar-item--active {
  color: @geek-color;
  background-color:  @geek-gray-color;
}
/deep/ .van-tabbar-item__icon {
  font-size: 20px;
}
/deep/ .van-tabbar-item__text {
  font-size: 10px;
}
</style>
